<template>
  <div id="My-content">
    <!-- 个人信息 -->
    <!-- 登录组件 -->
    <!-- <login></login> -->
    <!-- 头部区域：头像、退出登录 -->
    <div class="header">
      <img :src="userInfo.userPicUrl" />
      <p>
        <span v-text="userInfo.username"></span>
      </p>
      <van-button
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        :round="true"
        size="mini"
        @click="Login"
      >{{ButtonLabel}}</van-button>
    </div>
    <!-- 喜欢音乐，我的电台 -->
    <van-divider content-position="left">我的</van-divider>
    <div class="center">
      <div class="myLike">
        <a :href="'#/Playlist/'+ loveSongListId">
          <div>
            <van-icon name="like" />
            <p>我喜欢的音乐</p>
          </div>
        </a>
      </div>
      <div class="myRideo">
        <a :href="'#/myradio/'+ this.userInfo.uid">
          <div>
            <van-icon name="live" />
            <p>我的电台</p>
          </div>
        </a>
      </div>
    </div>
    <!-- 我的收藏 -->
    <van-divider content-position="left">收藏歌单</van-divider>
    <div class="centent">
      <div class="my">
        <div v-for="item in createCollection.playlist" :key="item.id" @click="getListId(item.id)">
          <div class="left">
            <img :src="item.coverImgUrl" alt />
          </div>
          <div class="right">
            <span class="van-multi-ellipsis--l2" v-text="item.name"></span>
            <span class="count" v-text="item.trackCount+'首'"></span>
          </div>
        </div>
      </div>
      <div class="other"></div>
    </div>
    <!-- 分页 -->
    <div class="buttonGroup">
      <van-button type="warning" @click="changePage('pre')">上一页</van-button>
      <van-button type="warning" @click="changePage('next')">下一页</van-button>
    </div>
  </div>
</template>

<script>
//登录组件
import Login from "../../subcom/Login.vue";
// 导入jquery
import $ from "jquery";
import { Notify } from "vant";

export default {
  props: ["parentmsg"],
  data: function() {
    return {
      //分页数据
      limit: "20",
      currentPage: "1",
      // 按钮提示信息
      ButtonLabel: "登录",
      // 登录状态
      isLogin: "",
      // uid
      uid: "",
      userInfo: {
        username: "未登录",
        userPicUrl: "../images/label/default.jpeg",
        backgroundUrl: "",
        isLogin: true,
        uid: "",
        level: ""
      },
      //我喜欢音乐的id
      loveSongListId: "",
      // 创建的歌单
      createCollection: [],
      // 收藏的歌单
      otherCollection: []
    };
  },
  created: function() {
    if (this.userInfo.isLogin == true) {
      // 获取localStorage
      this.userInfo.uid = localStorage.getItem("uid");
      // 获取用户详情
      this.$http.get("user/detail?uid=" + this.userInfo.uid).then(result => {
        // console.log(result);
        this.userInfo.userPicUrl = result.data.profile.avatarUrl;
        this.userInfo.backgroundUrl = result.data.profile.backgroundUrl;
        this.userInfo.isLogin = true;
        this.userInfo.username = result.data.profile.nickname;
        this.userInfo.level = result.data.level;
        this.ButtonLabel = "退出登录";
      });
      // 获取创建的歌单
      this.$http
        .get(
          "user/playlist?limit=" +
            (this.limit - 1) +
            "&uid=" +
            this.userInfo.uid
        )
        .then(result => {
          this.createCollection = result.data;
          this.loveSongListId = result.data.playlist[0].id;
        });

    }
  },
  methods: {
    // 跳转到歌单详情
    getListId(id) {
      this.$router.push("/PlayList/" + id);
    },
    // 登录
    Login() {
      if (this.ButtonLabel == "退出登录") {
        // 清除登录记录
        window.localStorage.removeItem("cookie");
        window.localStorage.removeItem("uid");
      }
      this.$router.push("/login");
    },

    //分页
    changePage(flag) {
      //停止标志
      let stop = false;
      if (flag == "next") {
        this.currentPage++;
        offset = (this.currentPage - 1) * this.limit;
        stop = true;
      } else if (flag == "pre") {
        if (this.currentPage == 1) {
          Notify({ type: "warning", message: "没有更多的了", duration: 500 });
        } else {
          this.currentPage--;
          stop = true;
        }
        if (this.currentPage == 1) {
          offset = this.currentPage * this.limit - 1;
        } else {
          offset = (this.currentPage - 1) * this.limit;
        }
      }
      if (stop) {
        this.$http
          .get(
            "user/playlist?limit=" +
              this.limit +
              "&uid=" +
              this.userInfo.uid +
              "&offset=" +
              offset
          )
          .then(result => {
            // console.log(result);
            // console.log(this.currentPage);
            if (result.data.playlist.length != 0) {
              this.createCollection = result.data;
            } else {
              Notify({
                type: "warning",
                message: "没有更多的了",
                duration: 500
              });
              this.currentPage--;
            }
          });
      }
    }
  },
  components: {
    login: Login
  }
};
</script>

<style lang="scss">
#My-content {
  .header {
    margin: 40px 0;
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    // 头像样式
    img {
      width: 70px;
      height: 100%;
      border-radius: 70px;
      margin-left: 20px;
    }
    button {
      margin-right: 20px;
    }
  }
  .center {
    width: 100%;
    height: 250px;
    display: flex;
    div {
      width: 50%;
      height: 100%;
      div {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        .van-icon {
          font-size: 35px;
          line-height: 70px;
        }
        p {
          font-size: 14px;
          line-height: 30px;
        }
      }
    }
    .myLike {
      padding: 20px 10px 20px 20px;
      div {
        color: white;
        background: url("../../images/My/MyLove.png");
        background-size: auto 100%;
        p {
          color: white;
        }
      }
    }
    .myRideo {
      padding: 20px 20px 20px 10px;
      div {
        color: white;
        background: url("../../images/My/MyRadio.png");
        background-size: auto 100%;
        p {
          color: white;
        }
      }
    }
  }
  // 收藏歌单样式
  .centent {
    width: 100%;
    padding: 15px;
    div {
      width: 100%;
      // display: flex;
      // flex-wrap: wrap;
      // justify-content: space-between;
      div {
        // width: 48%;
        height: 70px;
        display: flex;
        margin-bottom: 19px;
        justify-content:flex-start;
        .left {
          width: 70px;
          height: 70px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
          }
        }
        .right {
          width: 48%;
          height: 100%;
          margin-left: 40px;
          color: black;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          justify-content: space-between;
          span {
            font-size: 12px;
          }
          .count{
            color: #999;
          }
        }
      }
    }
  }
  .buttonGroup {
    display: flex;
    justify-content: space-between;
    margin: 0 15px;
    margin-top: -5%;
  }
}
</style>